<template>
	<!--客服热线-->
	<view @touchmove.stop.prevent="moveHandle" class="phoneMask">
		<view class="sever-modal-bg" v-show="isShow"></view>
		<view class="phone-modal" :class="{ active: isShow }">
			<view class="phoneLine common-phone-line text-center" data-ui="0" @click="callPhone">客服联系热线：4001658099</view>
			<view class="common-phone-line text-center color-main" data-ui="0" @click="isShow = !isShow">取消</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow: false
		};
	},
	props: {
		isShowPhone: {
			type: Boolean,
			default: false
		},
		labelType: {
			type: Number, //1:订单 2:商品 3:售后
			default: 0
		},
		content: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	methods: {
		showBox() {
			//小程序直接拨打电话
			if (this.$globalData.state.entrance == 'mp-weixin' || this.isShowPhone) {
				this.queryCloudServiceUrl();//小程序联调
				// this.isShow = true;
			} else {
				if (this.$utils.IsPC()) {
					this.$pcGuide.show();
					return;
				}
				this.queryCloudServiceUrl();
			}
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: '4001658099'
			});
		},
		queryCloudServiceUrl() {
			// console.log(this.getUserContent(), this.getAgentContent());
			// return;
			let req = {}
			// #ifdef H5
			if(this.labelType>0){
				req = {
					userContent:this.getUserContent(),
					agentContent:this.getAgentContent()
				}
			}
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('miguvideo') >= 0) {//视讯App 渠道ID ： 1515
				req.channelId = 1515;
			}
			if (this.$globalData.state.benefitType == 2){//5G云工会单独渠道
				req.channelId = 1517;
			}
			// #endif
			//#ifdef MP-WEIXIN
			req.channelId = 1512;//小程序客服云渠道
			req.jumpType = 1;//直接进聊天框,不走咪小咕服务站
			// #endif
			this.$request('common/getCloudServiceUrl',req).then(
				res => {
					console.log('common/getCloudServiceUrl', res);
					// return;
					var codeURI = encodeURIComponent(res.cloudServiceUrl);
					if (this.$globalData.state.entrance === 'app') {
						if (this.$globalData.state.isSDK) {
							window.location.href = res.cloudServiceUrl;
						} else {
							window.location.href = 'https://m.migudm.cn?pageType=webView&url=' + codeURI;
						}
					} else if (this.$globalData.state.entrance === 'mp-weixin') {
						this.$routeUtils.navigateTo({
							url: '/pages/tools/webView?webUrl=' + codeURI + '&enCode=1'
						});
					} else {
						// #ifdef  H5
						if (this.$utils.IsPC() && res.cloudServiceUrl.indexOf('https') == -1) {
							res.cloudServiceUrl = res.cloudServiceUrl.replace('http', 'https');
						}
						// #endif
						window.location.href = res.cloudServiceUrl;
					}
				},
				error => {
					this.isShow = true;
				}
			);
		},
		getUserContent() {
			// style content style与content的json结构包含的字段的映射关系
			// 1     label、id、link
			// 2     label、id、link、img
			// 3     label、id
			// 4     label、id、supply
			// 5     id、link
			let jsonArry = [];
			if (this.labelType == 1) {
				// mergeOrderCode
				// 订单编号（id）
				// 订单链接（link）
				// 商品名称（label）
				let content = {
					labelType: this.labelType,
					style: 1,
					id: this.content.orderCode || this.content.id,
					// label: this.getSpuName(this.content.orderDetails),
					label: this.getSpuName(this.content),
					link: window.location.href
				};
				jsonArry.push(content);
				return jsonArry;
			} else if (this.labelType == 2) {
				let { id, mainImageUrl: img, name: label } = this.content;
				let content = {
					labelType: this.labelType,
					style: 2,
					// id: id, 用户侧不展示商品spuId 客服云要求放空
					img: img,
					label: label,
					link: window.location.href
				};
				jsonArry.push(content);
				return jsonArry;
			} else if (this.labelType == 3) {
				let content = {
					labelType: this.labelType,
					style: 1,
					id: this.content.afsCode,
					label: this.getSpuName(this.content),
					link: window.location.href
				};
				jsonArry.push(content);
				return jsonArry;
			}
		},
		getAgentContent() {
			let jsonArry = [];
			if (this.labelType == 1) {
				let content = {
					labelType: this.labelType,
					style: 3,
					id: this.content.mergeOrderCode,
					// label: this.getSpuName(this.content.orderDetails)
					label: this.getSpuName(this.content)
				};
				jsonArry.push(content);
				return jsonArry;
			} else if (this.labelType == 2) {
				// 货号（id）
				// 供应商信息（supply）
				// 商品名称（label）
				let { supplierProductCode: id, productName: label } = this.content;
				let content = {
					labelType: this.labelType,
					style: 2,
					id: id,
					supply: this.getSupply(),
					label: label
				};
				jsonArry.push(content);
				return jsonArry;
			} else if (this.labelType == 3) {
				let content = {
					labelType: this.labelType,
					style: 3,
					id: this.content.afsCode,
					label: this.getSpuName(this.content)
				};
				jsonArry.push(content);
				return jsonArry;
			}
		}, //获取供应商信息
		getSupply() {
			let supply = '';
			switch (
				this.content.supplierCode // 供应商类型 1-NGOC 2-MDN 3-点滴 4-膳食盒子 5-网易严选 6-课程
			) {
				case 1:
					supply = 'NGOC';
					break;
				case 2:
					supply = 'MDN';
					break;
				case 3:
					supply = '点滴';
					break;
				case 4:
					supply = '膳食盒子';
					break;
				case 5:
					supply = '网易严选';
					break;
				case 6:
					supply = '课程';
					break;
				default:
					break;
			}
			if (this.content.supplierCode) {
				supply = supply + '-' + this.content.supplierCode;
			}
			return supply;
		},
		//获取订单信息，商品名字
		getSpuName(orderDetail) {
			let label = '';
			const { items } = orderDetail
			items.forEach(pro => {
				if (this.labelType == 3) {
					label = pro.name
				} else {
					label ? label += `,${pro.name}` : label = pro.name
				}
			})
			return label;
		}
	}
};
</script>

<style lang="scss">
.phone-modal {
	position: fixed;
	left: 0;
	bottom: -350rpx;
	right: 0;
	z-index: 999;
	transition: 0.15s;
	margin-bottom: env(safe-area-inset-bottom);
	.common-phone-line {
		background: #fff;
		margin: 20rpx;
		text-align: center;
		border-radius: 26rpx;
		height: 114rpx;
		line-height: 114rpx;
		font-size: 36rpx;
	}
	&.active {
		bottom: 0;
	}
}
.sever-modal-bg {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(0, 0, 0, 0.5);
}
</style>
